<template>
  <div>
    <el-card>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0px;
        "
      >
        <div>
          <el-button type="primary" size="mini" @click="searchComponent"
            >搜索<i class="el-icon-search el-icon--right"></i
          ></el-button>
          <el-button type="primary" size="mini" @click="loadingData"
            >刷新<i class="el-icon-refresh el-icon--right"></i
          ></el-button>
          <el-button v-if="userType == 3 || (currentOrg && currentOrg.agreement == '1')" type="primary" size="mini" @click="downModel"
          >模板下载<i class="el-icon-download el-icon--right"></i
          ></el-button>
          <UpLoadScvFile v-if="userType == 3 || (currentOrg && currentOrg.agreement == '1')"></UpLoadScvFile>
        </div>
        <div></div>
        <!--                <el-button icon="el-icon-search" circle @click="searchComponent"></el-button>-->
        <div v-show="userType == 2" style="display: flex">
          <div style="display: flex; align-items: center; font-weight: 600">
            <div
              style="
                width: 90px;
                height: 30px;
                background-color: rgb(251, 207, 127);
              "
            ></div>
            <span style="font-size: 14px; margin-left: 5px">用户已修改</span>
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              font-weight: 600;
              margin-left: 20px;
            "
          >
            <div
              style="width: 90px; height: 30px; background-color: pink"
            ></div>
            <span style="font-size: 14px; margin-left: 5px">用户未修改</span>
          </div>
        </div>
      </div>
      <el-table
        empty-text="暂无数据"
        size="small"
        :cell-style="stateTypeStyle"
        :data="tableData"
        border
        style="width: 100%"
      >
        <!-- <el-table-column
                    type="index">
                     </el-table-column> -->
        <el-table-column
          align="center"
          fixed
          prop="scope"
          label="姓名"
          width="150"
        >
          <template slot-scope="scope">
            <span class="tableHeader" @click="tableContent(scope.row.id)">{{
              scope.row.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="用户ID"
            width="120"
        >
          <template slot-scope="scope">
            <span v-text="scope.row.user"></span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="报名机构"
          width="120"
        >
          <template slot-scope="scope">
            <span v-text="scope.row.org.org_name.split('_')[0]"></span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="exam_org.org_name"
          label="报考机构"
          width="120"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="course.name"
          label="科目"
          width="170"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="scope"
          label="机构一审"
          width="120"
        >
          <template slot-scope="scope">
            <!--                        {{state_map_style[scope.row.state_code]}} &#45;&#45; {{scope.row.note}}-->
            <Item
              style="width: 100%; height: 100%"
              :stateType="'机构一审'"
              :note="scope.row.note"
              @chekcSuccess="chekcSuccess"
              :pid="scope.row.id"
              :state_code="scope.row.state_code"
            ></Item>
            <!--                        {{scope.row.state_code}}-->
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="scope"
          label="总部一审"
          width="120"
        >
          <template slot-scope="scope">
            <Item
              :stateType="'总部一审'"
              @chekcSuccess="chekcSuccess"
              :pid="scope.row.id"
              :state_code="scope.row.state_code"
            ></Item>
          </template>
        </el-table-column>

        <el-table-column
            align="center"
            prop="scope"
            label="报考确认书"
            width="150"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.signed">
              <el-popover
                  placement="left-start"
                  title="合同号"
                  width="200"
                  trigger="hover"
                  :content="scope.row.contract_id">
                <el-button size="mini" @click="lookTransation(scope.row.contract_id)" style="margin-right: 10px;" slot="reference">报考确认书</el-button>
              </el-popover>
<!--              <el-button size="mini" v-if="scope.row.state_code == 5 || scope.row.state_code == 7" @click="rejectContract(scope.row.id)">驳回</el-button>-->
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="scope"
          label="机构二审"
          width="120"
        >
          <template slot-scope="scope">
            <Item
              :signed="scope.row.signed"
              :stateType="'机构二审'"
              :isExam="scope.row.exam_date"
              :note="scope.row.note"
              @loding="loadingData"
              @chekcSuccess="chekcSuccess"
              :pid="scope.row.id"
              :state_code="scope.row.state_code"
              :exam_org="scope.row.exam_org"
            ></Item>
            <!-- {{scope.row.exam_org}} -->
            <!--           :exam_org_name="scope.row.exam_org_name"             {{scope.row.state_code}}&#45;&#45;{{scope.row.exam_date == null}}-->
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="scope"
            label="是否复审"
            width="120"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_preview">已复审</el-tag>
            <!-- {{scope.row.exam_org}} -->
            <!--           :exam_org_name="scope.row.exam_org_name"             {{scope.row.state_code}}&#45;&#45;{{scope.row.exam_date == null}}-->
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="scope"
          label="总部二审"
          width="120"
        >
          <template slot-scope="scope">
            <Item
              :stateType="'总部二审'"
              @loding="loadingData"
              :isExam="scope.row.exam_date"
              @chekcSuccess="chekcSuccess"
              :pid="scope.row.id"
              :state_code="scope.row.state_code"
            ></Item>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="scope"
          label="当前状态"
          width="200"
        >
          <template slot-scope="scope">
            <span>{{ state_map[scope.row.state_code] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="scope"
          label="证件类型"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.card_type_display }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="scope"
          label="证件号码"
          width="300"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.card_id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          label="手机号码"
          width="120"
        >
        </el-table-column>
<!--        <el-table-column align="center" prop="scope" label="驳回原因" width="300">-->
<!--          <template slot-scope="scope">-->
<!--            <span-->
<!--              style="-->
<!--                color: red;-->
<!--                overflow: hidden;-->
<!--                text-overflow: ellipsis;-->
<!--                white-space: nowrap;-->
<!--              "-->
<!--              v-text="scope.row.note.split('<已编辑>')[0]"-->
<!--            ></span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column align="center" prop="scope" label="备注" width="300">
          <template slot-scope="scope">
            <el-input :disabled="userType == 2" size="small" @change="addDetail(scope.row.detail,scope.row.id)" v-model="scope.row.detail" placeholder="请输入备注信息"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog width="66%" title="审核信息" :visible.sync="dialogTableVisible">
      <el-descriptions
        class="margin-top"
        title="报名信息"
        :column="3"
        size="mini"
        border
      >
        <template slot="extra">
          <el-button
              v-if="!currentData.is_preview"
              @click="preView(currentData.id)"
              type="primary"
              size="small"
          >确认复审</el-button
          >
          <el-button
              @click="stateLog(currentData.id)"
              type="primary"
              size="small"
          >审核日志</el-button
          >
        </template>
        <el-descriptions-item :span="3">
          <template slot="label"> 学员ID </template>
          <span v-text="currentData.user"></span>
        </el-descriptions-item>
        <el-descriptions-item :span="currentData.exam_org ? 1 : 3" v-if="currentData.org">
          <template slot="label"> 报名机构 </template>
          <span v-text="String(currentData.org.org_name).split('_')[0]"></span>
        </el-descriptions-item>
        <el-descriptions-item v-if="currentData.exam_org" :span="2">
          <template slot="label"> 机构代码 </template>
          <span v-text="currentData.exam_org ? currentData.exam_org.org_code :''"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 姓名 </template>
          {{ currentData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 性别 </template>
          {{ currentData.gender_display }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 手机号码 </template>
          {{ currentData.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 证件类型 </template>
          {{ currentData.card_type_display }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 证件号码 </template>
          {{ currentData.card_id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 出生日期 </template>
          {{ currentData.birthday }}
        </el-descriptions-item>
        <el-descriptions-item :span="currentData.grad_time ? 1:2">
          <template slot="label"> 最高学历 </template>
          {{ currentData.hig_edu }}
        </el-descriptions-item>
        <el-descriptions-item v-if="currentData.grad_time">
          <template slot="label"> 毕业年份 </template>
          {{ currentData.grad_time.split('-')[0]+'年'+currentData.grad_time.split('-')[1]+'月' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 邮箱 </template>
          {{ currentData.email }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 单位名称 </template>
          {{ currentData.com_name }}
        </el-descriptions-item>
          <el-descriptions-item>
          <template slot="label"> 工作区域 </template>
          {{ currentData.province }}{{ currentData.city }}{{ currentData.dis }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 相关证书 </template>
          {{ currentData.cert_display }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 行业类型 </template>
          {{ currentData.ind_type_display }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 单位类型 </template>
          {{ currentData.com_type_display }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 从业年限 </template>
          {{ currentData.work_age }}
        </el-descriptions-item>
        <el-descriptions-item v-if="currentData.work_duty" :span="3">
          <template slot="label"> 职务 </template>
          <p v-text="currentData.work_duty.split('#')[0]"></p>
          <p v-text="currentData.work_duty.split('#')[1]"></p>
        </el-descriptions-item>
        <el-descriptions-item v-if="currentData.exp_date">
          <template slot="label"> 账号期限 </template>
          {{ currentData.exp_date ? currentData.exp_date.split(' ')[0] : '' | expDate }} 至 {{ currentData.exp_date ? currentData.exp_date.split(' ')[0] : '' | formatDate2}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 审核状态 </template>
          {{ currentData.state_code == 5 && !currentData.exam_org ? '总部一审通过/待报考':currentData.state_code > 3 ? '报名信息审核完成':state_map[currentData.state_code]}}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
          v-show="currentData.exam_date"
        style="margin-top: 20px"
        class="margin-top"
        title="报考信息"
        :column="3"
        size="mini"
        border
      >
        <template slot="extra">
          <el-button
            v-if="currentData.signed"
            @click="lookTransation(currentData.contract_id)"
            type="primary"
            size="small"
            >查看报考确认书</el-button
          >
        </template>
        <!-- <el-descriptions-item>
                    <template slot="label">
                        毕业学校
                    </template>
                    {{currentData.school}}
                </el-descriptions-item> -->

        <!-- <el-descriptions-item>
                    <template slot="label">
                        专业门类
                    </template>
                    {{currentData.major}}
                </el-descriptions-item> -->
        <!-- <el-descriptions-item>
                    <template slot="label">
                        现有职称
                    </template>
                    {{currentData.work_title}}
                </el-descriptions-item> -->
        <!-- <el-descriptions-item>
                    <template slot="label">
                        现有职务
                    </template>
                    {{currentData.work_duty}}
                </el-descriptions-item> -->
        <!-- <el-descriptions-item v-if="currentData.work_duty_en">
                    <template slot="label">
                        现有职务英文
                    </template>
                    {{currentData.work_duty_en}}
                </el-descriptions-item> -->
        <!-- <el-descriptions-item>
                    <template slot="label">
                        证件照
                    </template>
                    <img width="50px" :src="currentData.photo">
                </el-descriptions-item> -->
        <el-descriptions-item v-if="currentData.exam_org">
          <template slot="label"> 报考机构 </template>
          <span v-text="currentData.exam_org ? currentData.exam_org.org_name:''"></span>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 是否补考 </template>
          <span v-text="currentData.make_up_count > 0 ? '是':'否'"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 考试城市 </template>
          {{ currentData.exam_city }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 考试时间 </template>
          {{ currentData.exam_date }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 审核状态 </template>
          {{ state_map[currentData.state_code] }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 准考证号 </template>
          {{ currentData.exam_code }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog title="审核日志" :visible.sync="stateLogVisible">
      <el-table
          :data="stateLogList"
          :default-sort = "{prop: 'add_time', order: 'descending'}"
          style="width: 100%">
        <el-table-column
            prop="add_time"
            label="日期"
            width="160"
            sortable
        >
          <template slot-scope="scope">
            <span>{{ scope.row.add_time.substr(0,19)}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="scope"
            label="审核状态"
            width="150"
        >
          <template slot-scope="scope">
            <span>{{ state_map2[scope.row.state]}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="note"
            label="备注">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {viewContract, addDetail, stateLog, check, preview} from '../../request/api'
import UpLoadScvFile from "../uploadCsvFile/UpLoadCsvFile.vue";
import { userType } from "../../utils/base";
import Item from "../Item";
import {formatDate} from "../../utils/formatDate";

export default {
  name: "Table",
  filters:{
    formatDate2 (time) {
      let date = new Date(time);
      return formatDate(date, 'yyyy年MM月dd日')
    },
    formatDate (time) {
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    expDate(time){
      let date = new Date(time);
      date.setFullYear(date.getFullYear() - 1);
      return formatDate(date, 'yyyy年MM月dd日')
    }
  },
  props: {
    tableData: {
      type: Array,
    },
    currentOrg:{
      type:Object
    }
  },
  data() {
    return {
      stateLogList:[],
      stateLogVisible:false,
      userType: 0,
      searchIsShow: false,
      state_map2: {
        org_pass_1:'机构一审通过',
        admin_pass_1:'总部一审通过',
        org_pass_2:'机构二审通过',
        admin_pass_2:'总部二审通过',
        org_reject_1:'机构一审驳回',
        admin_reject_1:'总部一审驳回',
        org_reject_2:'机构二审驳回',
        admin_reject_2:'总部二审驳回',
        contract_reject:'报考确认书驳回'
      },
      state_map_style: {
        0: "机构一审驳回",
        1: "机构一审",
        2: "机构一审驳回",
        3: "总部一审",
        4: "机构二审驳回",
        5: "机构二审",
        6: "机构二审驳回",
        7: "总部二审",
        8: "全部审核通过",
      },
      state_map: {
        0: "机构一审驳回",
        1: "机构一审待审",
        2: "总部一审驳回",
        3: "总部一审待审",
        4: "机构二审驳回",
        5: "机构二审待审",
        6: "总部二审驳回",
        7: "总部二审待审",
        8: "全部审核通过",
      },
      dialogTableVisible: false,
      currentData: {},
    };
  },
  computed: {},
  created() {
    console.log("table", this.$store.state.user_type);
    this.userType = this.$store.state.user_type;
  },
  methods: {
    preView(pid){
      preview(pid).then(res =>{
        console.log(res)
        this.$message({type:'success',message:'已提交'})
        this.$emit("loading");
      })
    },
    downModel(){
      window.open('https://api.ptaedu.cn/static/img/template_import.xls')
    },
    //合同驳回
    rejectContract(pid){
      this.$confirm('是否对此合同进行驳回操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {pid: pid, method: 'contract_reject'}
        check(params).then(res =>{
          console.log('合同驳回',res)
          this.$message({
            type: 'success',
            message: '驳回成功!'
          });
        }).catch(err =>{
          this.$message({type:'error',message:err.msg+'，'+err.errors})
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //总部添加备注信息
    addDetail(content,pid){
      console.log('content',content +'-'+ pid)
      this.$confirm('是否为改用户修改备注信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {'detail':content,'pid':pid}
        addDetail(params).then(res =>{
          console.log(res)
        })
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //查看合同
    lookTransation(contract_id) {
      viewContract({ contract_id: contract_id }).then((res) => {
        window.open(res.view_url);
      });
    },
    stateTypeStyle(column) {
      if (this.userType == 2) {
        if (
          column.columnIndex == 5 &&
          column.row.state_code < 4 &&
          column.row.exam_date == null
        ) {
          if (
            this.state_map_style[column.row.state_code].includes("驳回") &&
            !column.row.note.includes("已编辑")
          ) {
            return "background-color:pink";
          } else if (
            this.state_map_style[column.row.state_code].includes("驳回") &&
            column.row.note.includes("已编辑")
          ) {
            return "background-color: #fbcf7f";
          } else {
            return "background-color:#fff";
          }
        }
        if (
          column.columnIndex == 8 &&
          3 < column.row.state_code < 7 &&
          column.row.exam_date != null
        ) {
          if (
            this.state_map_style[column.row.state_code].includes("驳回") &&
            !column.row.note.includes("已编辑")
          ) {
            return "background-color:pink";
          } else if (
            this.state_map_style[column.row.state_code].includes("驳回") &&
            column.row.note.includes("已编辑")
          ) {
            return "background-color: #fbcf7f";
          } else {
            return "background-color:#fff";
          }
        }
      }
      return "textAlign:center";
    },
    loadingData() {
      // alert('加载数据')
      this.$emit("loading");
    },
    handleClick(row) {
      console.log(row);
    },
    searchComponent() {
      this.searchIsShow = !this.searchIsShow;
      this.$emit("search", this.searchIsShow);
    },
    //审核成功
    chekcSuccess() {
      this.$emit("ItemCheckSuccess");
    },
    //审核日志
    stateLog(pid){
      stateLog({pid:pid}).then(res =>{
        this.stateLogVisible = true
        console.log('审核日志',res)
        this.stateLogList = res.sort((a,b) => b.add_time - a.add_time);
      })
    },
    tableContent(item_id) {
      console.log('tableData',this.tableData)
      for (let item of this.tableData) {
        if (item.id == item_id) {
          this.currentData = item;
          console.log(this.currentData);
        }
      }
      this.dialogTableVisible = true;
    },
  },
  components: {
    Item,
    UpLoadScvFile,
  },
};
</script>

<style>
.el-table .el-table__cell{
  padding: 3px;
}
</style>

<style scoped>
.tableHeader {
  color: #008b8b;
  cursor: pointer;
  font-weight: 700;
  border-bottom: 2px blueviolet solid;
}

.tableHeader:hover {
  color: rebeccapurple;
}
</style>
